<template>
	<div>
	    <!-- 我是登录页 -->
	    <el-form ref="form" :model="form" :rules="rules" class="login-box">
	        <h2 class="login-title">东软his系统</h2>
	        <el-form-item label="用户名" prop="username">
	            <el-input type="text" placeholder="请输入用户名" v-model="form.username"></el-input>
	        </el-form-item>
	        <el-form-item label="密码" prop="password">
	            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
	        </el-form-item>
	        <el-form-item>
	            <el-button type="primary" @click="doLogin()">登录</el-button>
	        </el-form-item>
	
	    </el-form>
	</div>
	
</template>

<script>
	
	export default{
		name:'Login',
		data(){
			return{
				// user:{
				// 	username:'admin',
				// 	pass:'admin123',
				// 	act:'login'
				// },
				// msg:''
				form:{
				    username:'admin',
				    password:'admin123',
					act:'login'
				},
				rules:{
				    username: [{ 
				        required: true,
				        message: '请输入用户名',
				        trigger: 'blur' 
				    }],
				    password: [{ 
				        required: true,
				        message: '请输入密码',
				        trigger: 'blur' 
				    }],
				}
			}
		},
		methods:{
			doLogin(){

				let url='/login';
				let param=this.$qs.stringify(this.form);
				this.$axios.post(url,param)
				.then((resp)=>{
					let u=resp.data;
					if(u){
						//把当前用户信息保存到本地
						localStorage.setItem('login_user',JSON.stringify(u))
						//登录成功，跳转到主页
						this.$router.push('/Index');
					}else{
						this.msg='登录失败，请重新登录'
					}
				})
				.catch((err)=>{
					console.log('error=',err);
				})
			}
		}
	}
</script>

<!-- scoped="scoped"表示当前样式属于局部样式，只在当前组件中有效 -->
<style>
	div{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.login-box{
	    width:350px;
	    margin:120px auto;
	    border:1px solid #DCDFE6;
	    padding:20px;
	    border-radius:5px;
	    box-shadow: 0 0 30px #DCDFE6;
	}
	.login-title{
	    text-align:center;
	}
</style>
